import { View, Image, Text } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import Price from '@/components/Price';
import './index.scss';

export default function ({ shop, onHandle }) {
  const _onHandle = () => {
    onHandle?.(shop);
  };

  return (
    <View className="shop-item" onClick={_onHandle}>
      <View className="shop-info">
        <View className="shop-image">
          <Image mode="aspectFill" src={shop.logo} />
        </View>
        <View className="shop-right">
          <View className="shop-name">
            {shop.store_name}
            <AtIcon value="chevron-right" size="20" color="#CCCCCC" />
          </View>
          <View className="shop-address">
            <AtIcon value="map-pin" size="18" color="#333333" />
            <Text className="address-text">{shop.store_address}</Text>
            {shop.distance && (
              <Text>
                {shop.distance > 1000
                  ? `${Math.round(shop.distance / 1000)}km`
                  : `${shop.distance}m`}
              </Text>
            )}
          </View>
          <View className="shop-bottom">
            <View className="product-price">
              <Price price={shop.vip_price} />
            </View>
            {/* <View className="shop-level">
              <View className="shop-vip">门店会员{shop.vipCount}人</View>
            </View> */}
          </View>
        </View>
      </View>
    </View>
  );
}
